<template>
<div class="addperson">
    <aside class="add">
        
    <form @submit.prevent="addVuex()">
        <h1>添加人员</h1>
        <input type="text" required placeholder="请输入姓名" v-model.lazy.trim="objF.uname"/>
        <input type="number" required min="18" max="70"  placeholder="请输入你的岁数" v-model.lazy.trim="objF.age"/>
        <!-- 将v-model所获取到的value值转换成数字类型数据 -->
        <select name="" id="" required v-model.number="objF.port">
            <option value="" disabled>--请选择职务--</option>
            <option value="1">CEO</option>
            <option value="2">总经理</option>
            <option value="3">部门主管</option>
            <option value="4">组长</option>
            <option value="5">员工</option>
        </select>
        <input type="number" min="2500" placeholder="请输入薪资" required v-model.lazy.trim="objF.salary">
        <input type="date" placeholder="请输入入职日期" required v-model="objF.ctime"/>
        <aside class="a1">
        <input type="radio" value="0" v-model="objF.gender"/><span>女</span>
        <input type="radio" value="1" v-model="objF.gender"/><span>男</span>
        </aside>
        <aside class="a2">
            <button>提交</button>
        </aside>
    </form>
    </aside>
</div>
</template>

<script>
// map方法： 是vue3对于vuex的快捷应用方式
import { mapMutations } from 'vuex';

export default {
    name : 'AddPerson',
    data(){
        return{
            // 整个表单对应的对象
            objF:{
                uname:'',
                gender:0,
                age:18,
                port:'',
                salary:2500,
                ctime:'',
            }
        }
    },
    methods:{
// ...扩展运算符
// 利用扩展运算符，将mutations对象中的addlist属性提取出来使用
...mapMutations(['addlist']),        
        // 创建表单提交事件的函数
        addVuex(){
            //验证选择的入职时间不得超过当天时间 
            let nowtime = new Date().getTime(); // 当前系统时间戳
            let Ctime = new Date(this.objF.ctime).getTime(); //日期选择器时间戳
            if (Ctime > nowtime) {
                alert('录入时间不得超过当天时间');
                return;
            }

            // 将数据objF整个提交给内部的函数处理
            this.addlist(this.objF);
            // 添加完成后，重置表单

            
            this.$router.push('/list')
        }
    }
}
</script>

<style scoped>
.addperson{
    background-color: blueviolet;
    height: 90vh;
}
.add{
    width: 100%;
    text-align: center;
}

.add form{
    width: 100%;
    display: flex;
    align-items: center;
    flex-direction: column;
    justify-content: center;
    height: 90vh;
}
.add input{
    border-radius: 8px;
    margin-top: 30px;
    margin-bottom: 30px;
    width: 70%;
    line-height: 2rem;
    border: 0;
}
.a1{
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-evenly;
}
.a1 input{
    border: 0;
    width: 10%;
    line-height: 2rem;
}
.a2{
    width: 100%;
}
.a2 button{
    border-radius: 8px;
    border: 0;
    line-height: 2rem;
    width: 20%;
}
</style>